<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:49:04
-->
<template>
  <!--1. 容器 -->
  <div ref="Right1_container" style="height: 95%"></div>
</template>

<script>

import { Pie, G2 } from '@antv/g2plot';
export default{
  data(){
    return{
      dataArr:[
                { type: '打游戏', value: 200 },
                { type: '追剧', value: 100 },
                { type: '刷抖音', value: 300 },
                { type: '聊天', value: 100 },
                { type: '听音乐', value: 100 },
                { type: '其他', value: 200 },
               ]
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      const piePlot = new Pie(this.$refs.Right1_container, {
            appendPadding: 10,
  data:this.dataArr,
  angleField: 'value',
  colorField: 'type',
  radius: 0.75,
  legend: false,
  label: {
    type: 'spider',
    labelHeight: 40,
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
});

piePlot.render();
    }
  }

}
</script>
<style scoped>

</style>